<template>
<!-- 封装弹层组件以便复用 -->
  <div>
    <!-- 放置dialog弹出层 -->
    <!-- sync可以接收子组件传递过来的值和事件（这里的子组件指的是dialog源码中的）方便点击叉号时关闭弹层 -->
    <el-dialog 
    :title="showTitle" 
    @close="close"
    :visible="showDialog"
    :append-to-body="true"
    :close-on-click-modal="false"
    :close-on-press-escape="false"
    width="600px" 
    center>
      <!-- 放置表单 -->
      <el-form 
      label-width="120px"
      :model="formData"
      :rules="rules"
      ref="addDept"
      status-icon>
        <el-form-item label="部门名称：" prop="name" >
          <el-input size="small" style="width:80%;"
          placeholder="2-10个字符"
          v-model="formData.name"
          ></el-input>
        </el-form-item>

        <el-form-item label="部门编码：" prop="code" >
          <el-input size="small" 
          style="width:80%;"
          placeholder="2-10个字符"
          v-model="formData.code"
          ></el-input>
        </el-form-item>

        <el-form-item label="部门负责人：" prop="managerId" >
          <el-select 
          style="width:80%;"
          placeholder="请选择负责人"
          size="small"
          v-model="formData.managerId"
          >
          <!-- 下拉选项 循环 负责人列表数据
          label表示显示的字段，value表示要存储的负责人id-->
            <el-option 
            v-for="item in managerList"
            :key="item.id"
            :label="item.username"
            :value="item.id"
            >
            </el-option>

          </el-select>
        </el-form-item>

        <el-form-item label="部门介绍：" prop="introduce">
          <el-input 
          placeholder="1-100个字符"
          size="small" 
          type="textarea" 
          style="width:80%;"
          :rows="4"
          v-model="formData.introduce"
          ></el-input>
        </el-form-item>

        <el-form-item>
          <!-- 按钮 -->
          <el-row type="flex" justify="center">
            <el-col :span="20">
              <el-button style="width:25%;margin-top:10px;margin-right: 20px;margin-left: 20px;" type="primary"
              @click="btnOk"
              >确定</el-button>
              <el-button 
              style="width:25%;" 
              @click="close"
              >取消</el-button>
            </el-col>
          </el-row>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
import {getDepartment,getManagerList,addDepartment,getDepartmentDetails,updateDepartment} from '@/api/department'
import {Message} from 'element-ui'
import {processDepartmentData} from '@/utils'

export default{
  // computed:{
  //   // 区分场景标题（新增或者编辑）
  //   showTitle(){
  //     return this.formData.id?'编辑部门':'新增部门'
  //   }
  // },
  created(){
    this.getManagerLists()
    
  },
  data(){
    return {
      managerList:[],//负责人列表
      // 添加部门表单数据
      formData:{
        code:'',//部门编码
        introduce:'',//部门介绍
        managerId:'',//部门负责人id
        name:'',//部门名称
        pid:'',//父级id---->currentNodeId
      },
      // 添加部门规则
      rules:{
        name:[
          { required: true, message: '请输入部门名称', trigger: 'blur' },
          {
            pattern: /^\S{2,10}$/,
            message: '名称必须是2-10位的非空字符',
            trigger: 'blur'
          },
          // 自定义检验
          {
            validator:async(rule,value,callback)=>{
              // value就是输入的名称
              let result=await getDepartment()
              // 判断是否为编辑模式
              if(this.formData.id){
                // 编辑场景
                result=result.filter((item)=>item.id!==this.formData.id)
              }
              // 检查result数组中是否存在传入的value
              if(result.some((item)=>item.name===value)){
                callback(new Error('已存在该部门名称'))
              }else{
                callback()
              }

            }
          }
        ],
        code:[
          { required: true, message: '请输入部门编码', trigger: 'blur' },
          {
            pattern: /^\S{2,10}$/,
            message: '编码必须是2-10位的非空字符',
            trigger: 'blur'
          },
          // 自定义检验
          {
            validator:async(rule,value,callback)=>{
              // value就是输入的编码
              let result=await getDepartment()
              // 判断是否为编辑模式
              if(this.formData.id){
                // 编辑场景
                result=result.filter((item)=>item.id!==this.formData.id)
              }
              // 检查result数组中是否存在传入的value
              if(result.some((item)=>item.code===value)){
                callback(new Error('已存在该部门编码'))
              }else{
                callback()
              }

            }
          }
        ],
       
        managerId:[
          { required: true, message: '请选择部门负责人', trigger: 'blur' },
          
        ],
        introduce:[
          { required: true, message: '请输入部门介绍', trigger: 'blur' },
          {
            pattern: /^\S{1,100}$/,
            message: '部门介绍必须是1-100位的非空字符',
            trigger: 'blur'
          }
        ],
        

      }
    }
  },
  // 父传子，接收父组件数据
  props:{
    // 控制弹层显示
    showDialog:{
      type:Boolean,
      default:false,
      required:true
    },
    // 接收的相应部门id
    currentNodeId:{
      type:Number,
      default:null,
      required:true
    },
    // 不同场景下的标题
    showTitle:{
      type:String,
      required:true
    }
  },
   methods:{
      close(){
        // 重置表单
        // 注意：resetFields只能重置表单数据中存在的属性的值，也就是绑定了的模版中的数据formData,但是在编辑时，formData中有了id字段，（可以在vue调试中看到），而这个组件中的formData还是之前模版中的字段，那么想要清空彻底，也就是也将id字段清空，我们需要手动解决
        // this.formData={
        //   code:'',//部门编码
        //   introduce:'',//部门介绍
        //   managerId:'',//部门负责人id
        //   name:'',//部门名称
        //   pid:'',//父级id---->currentNodeId
        // },
        this.$refs.addDept.resetFields()
        // 子传父，修改父组件的值,关闭弹层
        this.$emit('update:showDialog',false)
      },
      async getManagerLists(){
        const result=await getManagerList()
        // console.log(result);
        /*由于前端渲染需要修改后端传过来的数据，所以需要对数据进行处理*/
        //对返回的数据进行切片处理，并赋值
        const resList=processDepartmentData(result)
        this.managerList=resList
        // console.log(this.managerList);
      },
     
      
      // 点击确定时调用
      async btnOk(){
        try {
        await this.$refs.addDept.validate()
        // 区分环境
        if(this.formData.id){
          // 编辑环境
          await updateDepartment(this.formData)
        }else{
          // 新增环境
          await addDepartment({...this.formData,pid:this.currentNodeId})
        }
        
        // 通知父组件实时更新获取最新数据，不需要手动刷新了
        this.$emit('updateDepartment')
        // 提示用户
        this.formData.id? Message.success('编辑部门成功'):Message.success('添加部门成功')
        // 调用close方法直接实现重置表单，关闭弹层，避免重复多写代码
        this.close()

       } catch (error) {
        // console.log(error);
        
       }
      },
      // 获取点击的组织的详情数据，便于父组件点击编辑时进行回显
      async getDepartmentDetail(){
        const res=await getDepartmentDetails(this.currentNodeId)
        // console.log(res)
        this.formData=res
    
      }
    }
}
</script>

<style scoped>

</style>
